import React, { Component } from 'react'
import { Card, Col, Icon, Row, Tag, message } from 'antd'
import MyStudentTaskStatusCell from './my-student-task-status-cell'
import TitleTip from '../../common/title-tip'
import * as map from '../../../constant/section-status-color'
import '../../../less/index.less'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { getStudentAssignmentStatus } from '../../../actions/myStudents'
import { convertContent, getLangFromLocalStorage } from '../../../constant/lang-util'
import { FormattedMessage } from 'react-intl'

const {CheckableTag} = Tag
const SIMPLE_CODING_QUIZ = 'SIMPLE_CODING_QUIZ'

class MyStudentTaskStatusView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isShowMyStudentTaskStatus: false,
      IconType: 'right'
    }
  }

  showMyStudentTaskStatus (assignmentId) {
    const { IconType } = this.state
    let type = IconType === 'down' ? 'right' : 'down'
    this.setState({
      isShowMyStudentTaskStatus: !this.state.isShowMyStudentTaskStatus,
      IconType: type
    }, () => {
      if (this.state.isShowMyStudentTaskStatus) {
        this.props.getStudentAssignmentStatus(this.props.programId, assignmentId)
      }
    })
  }

  myStudentTaskStatusCell (task, assignment, assignmentStatusArray) {
    return assignmentStatusArray.map((assignmentStatus, index) => {
      return <Col className='gutter-row text-center' key={index} span={6}>
        <MyStudentTaskStatusCell task={task} section={assignment} sectionStatus={assignmentStatus || []}
          status={map.status[index]} />
      </Col>
    })
  }

  titleTip (sectionStatusArray) {
    return sectionStatusArray.map((sectionStatus, index) => {
      return <TitleTip key={index} title={map.status[index]} count={sectionStatus} />
    })
  }

  getTitle (topic, task, assignment) {
    const lang = getLangFromLocalStorage()
    if (topic[`title_${lang}`]) {
      return topic[`title_${lang}`] + ' / ' + task[`title_${lang}`] + ' / ' + assignment[`title_${lang}`]
    }
    return topic.title + ' / ' + task.title + ' / ' + assignment.title
  }

  handleDownloadAnswerChange (isDownloading) {
    if (!isDownloading) {
      this.setState({isDownloading: true})
      this.downloadUserAnswers()
    }
  }

  downloadUserAnswers () {
    const {myStudentsAssignment, programId, user} = this.props
    const {assignment} = myStudentsAssignment

    const assignmentQuiz = assignment.selectedQuizzes[0]
    const {assignmentId, quizId} = assignmentQuiz
    window.location.href = `../api/programs/${programId}/tutors/${user.id}/assignments/${assignmentId}/quizzes/${quizId}/answerFile`
    message.success(convertContent('正在下载,请勿刷新页面'))
  }

  hasSubmittedStudent (situation) {
    const {assessedCount, unAssessedCount, reviewingCount} = situation
    return assessedCount !== 0 || unAssessedCount !== 0 || reviewingCount !== 0
  }

  needDownloaded (assignment, situation) {
    if (this.isSimpleCodingQuiz(assignment) && this.hasSubmittedStudent(situation)) {
      return true
    }
    return false
  }

  isSimpleCodingQuiz (assignment) {
    return assignment.type === SIMPLE_CODING_QUIZ
  }
  render () {
    const {isDownloading} = this.state
    const {myStudentsAssignment, assignmentStudents} = this.props
    const {topic, task, assignment, situation} = myStudentsAssignment
    const students = (assignmentStudents).filter(item => item.assignmentId === assignment.id)[0] || {}
    const assignmentsStatusArray = [ situation.unfinishedCount, situation.reviewingCount, situation.unAssessedCount, situation.assessedCount ]
    const studentsAssignmentsStatusArray = [ students.unfinishedStudents, students.reviewingStudents, students.unAssessedStudents, students.assessedStudents ]
    const title = this.getTitle(topic, task, assignment)

    return (<div>
      {topic.title
          ? <Card
            className='margin-t-1 studentSectionList'
            noHovering bordered={false}
            title={<div>
              <span onClick={this.showMyStudentTaskStatus.bind(this, assignment.id)}>{title}
                <Icon type={this.state.IconType} className='margin-l-2 click-icon' />
              </span>
              <div style={{float: 'right'}}>
                {
                  this.needDownloaded(assignment, situation)
                  ? <CheckableTag
                    checked={!isDownloading}
                    onChange={this.handleDownloadAnswerChange.bind(this)}>
                    {<FormattedMessage id={isDownloading ? '已下载' : '下载学员答案'} />}
                  </CheckableTag>
                    : ''
                }
                {this.titleTip(assignmentsStatusArray)}
              </div>
            </div>
              }>
            {this.state.isShowMyStudentTaskStatus
                ? <div>
                  <Row gutter={32}>
                    {this.myStudentTaskStatusCell(task, assignment, studentsAssignmentsStatusArray)}
                  </Row>
                </div> : ''}
          </Card>
          : ''
        }
    </div>

    )
  }
}

const mapStateToProps = ({studentsAssignmentStatus, settings, user}) => ({
  assignmentStudents: studentsAssignmentStatus.assignmentStudents,
  settings,
  user
})
const mapDispatchToProps = dispatch => ({
  getStudentAssignmentStatus: (programId, assignmentId) => dispatch(getStudentAssignmentStatus(programId, assignmentId))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MyStudentTaskStatusView))
